<template>
  <div>
    <div id="container" style="width: 100%; height: 600px;"></div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import '@amap/amap-ui/dist/main.css'; // 引入样式

export default {
  name: 'DistrictClusterMap',
  data() {
    return {
      map: null,
      distCluster: null,
      loading: true
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    async initMap() {
      try {
        // 使用 AMapLoader 加载地图 JavaScript API
        const loader = await AMapLoader.load({
          key: '您的高德地图 API Key',
          version: '2.0',
          plugins: ['AMap.DistrictCluster']
        });

        // 创建地图实例
        this.map = new loader.AMap.Map('container', {
          zoom: 4
        });

        // 加载区划聚合插件
        AMapLoader.loadUI(['ui/geo/DistrictCluster'], (DistrictCluster) => {
          // 创建 DistrictCluster 实例
          this.distCluster = new DistrictCluster({
            map: this.map,
            zIndex: 11,
            getPosition: (item) => {
              if (!item) {
                return null;
              }
              const parts = item.split(',');
              return [parseFloat(parts[0]), parseFloat(parts[1])];
            }
          });

          // 加载示例数据
          this.loadClusterData();
        });
      } catch (error) {
        console.error('地图加载失败：', error);
      }
    },
    loadClusterData() {
      // 模拟加载数据，实际应用中根据需要进行网络请求获取数据
      const dataUrl = 'https://a.amap.com/amap-ui/static/data/10w.txt';
      fetch(dataUrl)
        .then(response => response.text())
        .then(data => {
          this.distCluster.setData(data.split('\n'));
          this.loading = false; // 数据加载完成
        })
        .catch(error => {
          console.error('加载数据失败：', error);
        });
    }
  }
};
</script>

<style scoped>
/* 自定义样式 */
</style>
